<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layout布局页面</title>
	    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
	    <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"/>
	    <link rel="stylesheet" href="../js/easyui/themes/icon.css" />
        <script type="text/javascript">
        	$(function(){
	    		//页面加载后，对datagrid进行设置，每一个数组就是表头一行
	    		
	    		$("#grid").datagrid({
	    			//设置表格一些属性
	    			columns :[[//二维数组可以设置多重表头
	    			   {
	    			   	 field:"id",
	    			   	 title:"编号",
	    			   	 width:100,
	    			   	 editor :{
	    			   	 	type:'validatebox',
	    			   	 	options:{
	    			   	 		required :true
	    			   	 	}
	    			   	 }
	    			   	 
	    			   },
	    			   {
	    			   	 field:"name",
	    			   	 title:"商品名称",
	    			   	 width:200,
	    			   	 editor :{
	    			   	 	type:'validatebox',
	    			   	 	options:{
	    			   	 		required : true
	    			   	 	}
	    			   	 }
	    			   	 
	    			   },
	    			   {
	    			   	 field:"price",
	    			   	 title:"商品价格",
	    			   	 width:200,
	    			   	 editor :{
	    			   	 	type:'validatebox',
	    			   	 	options:{
	    			   	 		required : true
	    			   	 	}
	    			   	 	
	    			   	 }
	    			   }
	    			]],
	    		    toolbar :[
	    		    {
	    		       	 id : 'add',
	    		       	 text:'添加',
	    		       	 iconCls:'icon-add',
	    		       	 handler : function(){
	    		       	 	if(currentEditIndex ! = undefined){
	    		       	 		//正在编辑
	    		       	 		return;
	    		       	 	}
	    		       	 	//插入一行新的数据，到首行
	    		       	 	$("#grid").datagrid('insertRow',{
	    		       	 		index : 0,
	    		       	 		row :{}//空对象
	    		       	 	});
	    		       	 	//开启编辑状态
	    		       	 	$("#grid").datagrid('beginEdit',0);
	    		       	 	//保存全局变量
	    		       	 	currentEditIndex = 0;
	    		       	 }
	    		      },
	    		      {
	    		       	 id : 'edit',
	    		       	 text:'编辑',
	    		       	 iconCls:'icon-edit',
	    		       	 handler : function(){
	    		       	 	if(currentEditIndex != undefined){
	    		       	 		//正在编辑
	    		       	 		return;
	    		       	 	}
	    		       	     //获取到选中行
	    		       	     var row = $("#grid").datagrid('getSelected');
	    		       	      var index = $("#grid").datagrid('getRowIndex',row);
	    		       	     //增放一行
	    		       	     $("#grid").datagrid('beginEdit',index);
	    		       	     //保存到全局变量
	    		       	     currentEditIndex = index ;
	    		       	 }
	    		       	 
	    		      },
	    		       {
	    		       	 id : 'save',
	    		       	 text:'保存',
	    		       	 iconCls:'icon-save',
	    		       	 handler : function(){
	    		       	 	//保存编辑效果
	    		       	 	$("#grid").datagrid('endEdit',currentEditIndex);
	    		       	    currentEditIndex = undefined;
	    		       	 }
	    		       	 
	    		       },
	    		       {
	    		       	 id : 'cancel',
	    		       	 text:'取消',
	    		       	 iconCls:'icon-save',
	    		       	 handler : function(){
	    		       	 	//保存编辑效果
	    		       	 	$("#grid").datagrid('cancelEdit',currentEditIndex);
	    		       	    currentEditIndex = undefined;
	    		       	 }
	    		       	 
	    		       }
	    		       
	    		    ],
	    		    url:'product.json',
	    		    singleSelect :true,
	    		    
	    		});
	    		//全局变量
	    		var currentEditIndex ;
	    	});
        </script>
	</head>
	<body >
		<!--
        	作者：offline
        	时间：2017-07-19
        	描述：数据表格
        -->
        <table id="grid"></table>
	</body>
</html>
